<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="6">
        <CommonCard title="今日销售额" :value="30346799">
          <div>
            日同比 -19.16%<el-icon color="red"><CaretBottom /></el-icon>
          </div>
          <div>
            月同比 56.67%<el-icon color="green"><CaretTop /></el-icon>
          </div>
          <template #footer>
            <div>昨日销售额¥ 360,000,00</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <CommonCard title="今日订单" :value="2562061">
          <LineChart />
          <template #footer>
            <div>昨日订单量¥ 210,000,0</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <CommonCard title="今日交易用户数" :value="182425">
          <BarChart />
          <template #footer>
            <div>退货率33%</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <CommonCard title="累计用户数" :value="1177965"></CommonCard>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
export default {
  name: "XHome",
};
</script>
<script lang="ts" setup>
import CommonCard from "./components/CommonCard.vue";
import LineChart from "./components/LineChart.vue";
import BarChart from "./components/LineChart.vue";
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
</script>

<style scoped></style>
